import React, { Component } from 'react'
import Home from './views/Home'
import Recharge from './views/Recharge'
import Record from './views/Record'
import { Switch, Route, Redirect } from 'react-router-dom/cjs/react-router-dom.min'
import Ctx from './views/store/Ctx'

export default class App extends Component {

  state = {
    list: [ //total:单价 num:数量 sed:选取 del:删除 time:下单时间
      { id: 1, title: '游戏点卡', time: '2025-8-1', total: 50, num: 1, alltotal: 50, payType: '微信', sed: false, del: false }
    ]
  }

  //添加列表
  add = (obj) => {
    this.setState({ list: [...this.state.list, obj] })
  }

  //单个切换
  changeSed = (id) => {
    let newlist = [...this.state.list]
    newlist.forEach(item => {
      if (item.id == id) {
        item.sed = !item.sed
      }
    })
    this.setState({ list: newlist })
  }

  //反选
  changeAllSed = (c) => {
    let newlist = [...this.state.list]
    newlist.forEach(item => {
      item.sed = c
    })
    this.setState({ list: newlist })
  }

  //删除
  del = (id) => {
    let newlist = this.state.list.filter(item => {
      return item.id !== id
    })
    this.setState({ list: newlist })
  }

  //删除已选择
  delAll = () => {
    let newlist = this.state.list.filter(item => {
      return !item.sed
    })
    this.setState({ list: newlist })
  }

  //++-- payload = id num值
  changeNum = (id, newnum) => {
    let newlist = [...this.state.list]
    newlist.forEach(item => {
      if (item.id == id) {
        item.num = newnum
      }
    })
    this.setState({ list: newlist })
  }

  //假删除 改变状态 del = true
  changeDel = (id) => {
    let newlist = [...this.state.list]
    newlist.forEach(item => {
      if (item.id == id) {
        item.del = true
      }
    })
    this.setState({ list: newlist })
  }

  render() {
    return (<Ctx.Provider value={{
      ...this.state,
      add: this.add,
      changeSed: this.changeSed,
      changeAllSed: this.changeAllSed,
      del: this.del,
      delAll: this.delAll,
      changeNum: this.changeNum,
      changeDel: this.changeDel
    }}>
      <div>
        {/* 配置一级路由 */}
        <Switch>
          <Route path='/home' component={Home} />
          <Route path='/recharge/:title' component={Recharge} />
          <Route path='/record' component={Record} />
          <Redirect from='/' to='/home' />
        </Switch>
      </div>
    </Ctx.Provider>

    )
  }
}
